.relay-widget {
  @extend %flex-center-nowrap, %break-word;

  border-bottom: $border;
  padding: 2em var(--box-padding);
  position: relative;

  @include transition;

  &::before {
    color: $c-font-dimmer;
    font-size: 5em;
    margin-right: 0.4em;

    @include transition;
    @include breakpoint($mq-not-xx-small) {
      display: none;
    }
  }
  &--active::before {
    color: mix($c-link, $c-bg-box, 80%);
  }

  &:hover {
    background: mix($c-link, $c-bg-box, 10%);
    h2 {
      @include transition;
      color: $c-link;
    }

    &--active::before {
      color: mix($c-link, $c-bg-box, 100%);
    }
  }

  .overlay {
    @extend %link-overlay;
  }

  & > div {
    flex: 1 1 100%;
  }

  p {
    margin: 0.5em 0 0 0;
    &:first-child {
      margin-right: 1em;
    }
  }

  &__info {
    @extend %flex-between-nowrap;
    &__meta {
      white-space: nowrap;
      text-align: right;
    }
  }
}
